<style type="text/css">
        * { margin: 0; padding: 0;}
        
        #wrapper {
            width: 500px;
			clear: both;
           
        }
        .active {
            background: #3883cc url(img/right.png) no-repeat 5px center;
        }
        dl  {
            width: 250px;
        }
        
        dt{
            background: #3883cc url(img/down.png) no-repeat 5px center;
            border-bottom: 1px solid white;
            font-size: 14px; 
            padding: 5px 0px;
        }
        
        dt a {
            color: white;
            text-decoration: none;
            padding: 0px 18px;
        }
        
        dd a {
            color: black;
        }
        
        ul {
            list-style: none; padding: 0px;
        }
        
     </style>

    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>-->

     <script type="text/javascript">
        $(document).ready(function() {
            $('dd:not(:first)').hide();
            $('dt a').click(function()  {
                $('dd:visible').slideUp('slow');
                $('.active').removeClass('active');
                $(this).parent().addClass('active').next().slideDown('slow');
                return false;
            });
                
        });
     </script>
	 

 <div id="wrapper">
 <dl>
<?php $catalogs = $this->requestAction('catalogs/index/sort:created/direction:asc/limit:20');
?>
 
 <?php foreach($catalogs as $catalog): ?>
 
	 <dt><?php echo $catalog['tendanhmuc'];?>		</dt>

   
 
 <?php endforeach; ?>
  </dl>    
    </div>